<template>
  <div>
    <storeDiyForm :title="diyItem.name">


      <template #content>
        <storeDiyFormItem label="选择风格">
          <storeDiyFormTempBtn
            text="选择风格"
            type="page"
            v-model="diyItem.temp"
          >
          </storeDiyFormTempBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="页面名称">
          <el-input v-model="diyItem.title.text" />
        </storeDiyFormItem>
        <storeDiyFormItem label="展示位置" v-if="diyItem.temp.value == 1">
          <storeDiyFormSelectBtn
            v-model="diyItem.title.style.position"
            :data="positionData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="图片"
          v-show="diyItem.temp.value == 2 || diyItem.temp.value == 3"
        >
          <storeDiyFormImageBtn
            text="点击设置图片"
            size="small"
            v-model="diyItem.title.style.img"
          >
          </storeDiyFormImageBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="跳转链接">
          <storeDiyFormLinkBtn
            text="选择跳转到的页面"
            v-model="diyItem.title.link"
          >
          </storeDiyFormLinkBtn>
        </storeDiyFormItem>
      </template>



      <template #style>
        <storeDiyFormItem label="标题颜色">
          <storeDiyFormColorBtn v-model="diyItem.title.style.color" />
        </storeDiyFormItem>
        <storeDiyFormItem label="顶部透明">
          <storeDiyFormSelectBtn
            v-model="diyItem.title.style.opacity"
            :data="opacityData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="顶部背景"
          v-if="diyItem.title.style.opacity == 0"
        >
          <storeDiyFormColorBtn v-model="diyItem.title.style.bg" />
        </storeDiyFormItem>
        <storeDiyFormItem label="搜索框颜色" v-if="diyItem.temp.value == 3">
          <storeDiyFormColorBtn v-model="diyItem.title.style.search_bg" />
        </storeDiyFormItem>
        <storeDiyFormItem label="搜索框透明" v-if="diyItem.temp.value == 3">
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.title.style.search_opacity }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.title.style.search_opacity"
              size="small"
              :min="0"
              :max="100"
            />
          </div>
        </storeDiyFormItem>
        <el-divider content-position="left">
          <div class="fw">页面显示样式</div>
        </el-divider>
        <storeDiyFormItem label="页面颜色">
          <storeDiyFormColorBtn v-model="diyItem.style.bg" />
        </storeDiyFormItem>
        <storeDiyFormItem label="页面背景">
          <storeDiyFormSelectBtn
            v-model="diyItem.style.img_status"
            :data="statusData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <storeDiyFormItem v-if="diyItem.style.img_status == 1">
          <storeDiyFormImageBtn
            text="点击设置图片"
            size="large"
            v-model="diyItem.style.img"
          >
          </storeDiyFormImageBtn>
        </storeDiyFormItem>
      </template>



      <template #other>
        <storeDiyFormItem label="状态颜色">
          <storeDiyFormColorBtn v-model="diyItem.wxapp.color" />
        </storeDiyFormItem>
        <storeDiyFormItem label="收藏显示状态">
          <storeDiyFormSelectBtn
            v-model="diyItem.wxapp.collect"
            :data="statusData"
            ><div class="text-grey fz12">
              首次进入是否显示添加提示
            </div></storeDiyFormSelectBtn
          >
        </storeDiyFormItem>

        <storeDiyFormItem label="分享卡片图">
          <storeDiyFormImageBtn
            text="点击设置图片"
            size="small"
            v-model="diyItem.wxapp.share.cover"
          >
          </storeDiyFormImageBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="分享朋友圈图">
          <storeDiyFormImageBtn
            text="点击设置图片"
            size="small"
            v-model="diyItem.wxapp.share.thumb"
          >
          </storeDiyFormImageBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="分享标题">
          <el-input v-model="diyItem.wxapp.share.title" />
        </storeDiyFormItem>
      </template>


    </storeDiyForm>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeDiyEditorPage",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import storeDiyForm from "../form/index.vue";
import storeDiyFormItem from "../form/item.vue";
import storeDiyFormItems from "../form/items.vue";
import storeDiyFormTempBtn from "../form/temp-btn.vue";
import storeDiyFormSelectBtn from "../form/select-btn.vue";
import storeDiyFormImageBtn from "../form/image-btn.vue";
import storeDiyFormLinkBtn from "../form/link-btn.vue";
import storeDiyFormColorBtn from "../form/color-btn.vue";

import { diySelectDataType, diyPageDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem?: diyPageDataType;
  }>(),
  {
    diyItem: () => {
      return {
        temp: {
          value: 0,
          title: "",
        },
        title: {
          text: "",
          style: {
            position: "",
            img: "",
            color: "#000000",
            opacity: 0,
            bg: "#FFFFFF",
            search_bg: "#000000",
            search_opacity: 0,
          },
          link: {},
        },
        style: {
          bg: "#F0F0F0",
          img_status: 0,
          img: "",
        },
        wxapp: {
          color: "#FFFFFF",
          collect: 0,
          share: {
            cover: "",
            thumb: "",
            title: "",
          },
        },
      };
    },
  }
);

const positionData = ref<Array<diySelectDataType>>([
  {
    title: "居中",
    value: "center",
  },
  {
    title: "居左",
    value: "left",
  },
]);

const opacityData = ref<Array<diySelectDataType>>([
  {
    title: "透明",
    value: 1,
  },
  {
    title: "不透明",
    value: 0,
  },
]);

const statusData = ref<Array<diySelectDataType>>([
  {
    title: "显示",
    value: 1,
  },
  {
    title: "不显示",
    value: 0,
  },
]);

const colorData = ref<Array<diySelectDataType>>([
  {
    title: "白色",
    value: "#ffffff",
  },
  {
    title: "黑色",
    value: "#000000",
  },
]);
</script>